import { Button, Card, Checkbox, Form, Input, Space, Table } from 'antd'
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import React, { useEffect, useState } from 'react'
import { ColumnsType } from 'antd/lib/table'
import { getHospitalSetList } from '@api/hospital/hospitalSet'
import { HospitalSetList,HospitalSetItem } from '@api/hospital/model/hospitalSetTypes'

import '../index.less'

export default function HospitalSet() {
    let [total, setTotal] = useState<number>(5)
    let [pageSize, setPageSize] = useState(3)
    let [current, setCurrent] = useState(1)
    let [dataSource, setDataSource] = useState<HospitalSetList>([])
    let [loading, setLoading] = useState(false)


    async function getHospitalSetData(page = current, limit = pageSize) {
        let payload = { page, limit, ...form.getFieldsValue() }
        setLoading(true)
        let { records, total, size, current: pageIndex } = await getHospitalSetList(payload)
        setLoading(false)
        setDataSource(records)
        setTotal(total)
        setCurrent(pageIndex)
        setPageSize(size)
    }
    useEffect(() => {
        getHospitalSetData()
    }, [])
    const columns: ColumnsType<HospitalSetItem> = [
        {
            title: '序号',
            render(value, row, index) {
                return index + 1
            }
        },
        {
            title: '医院名称',
            dataIndex: 'hosname'
        },
        {
            title: '医院编号',
            dataIndex: 'hoscode'
        },
        {
            title: 'api基础路径',
            dataIndex: 'apiUrl'
        },
        {
            title: '签名',
            dataIndex: 'signKey'
        },
        {
            title: '联系人姓名',
            dataIndex: 'contactsName'
        },
        {
            title: '联系人手机',
            dataIndex: 'contactsPhone'
        },
        {
            title: '操作',
            render() {
                return (
                    <>
                        <Space size={10}>
                            <Button type='primary' icon={<EditOutlined />}></Button>
                            <Button type='primary' icon={<DeleteOutlined />} danger></Button>
                        </Space>
                    </>

                )
            }
        },
    ]
    async function finishHandler() {
        // 1. 发送请求
        getHospitalSetData()
    }
    /**
     * 清空
     */
    let [form] = Form.useForm()
    function clearHandler() {
        form.resetFields()
        getHospitalSetData()
    }
    return (
        <Card >
            <Form
                form={form}
                layout='inline'
                name="basic"
                autoComplete="off"
                onFinish={finishHandler}
            >
                <Form.Item
                    name="hosname"
                >
                    <Input placeholder='医院名称' />
                </Form.Item>

                <Form.Item
                    name="hoscode"
                >
                    <Input placeholder='医院编号' />
                </Form.Item>

                <Form.Item >
                    <Space size={15}>
                        <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
                            查询
                        </Button>
                        <Button disabled={!form.getFieldsValue().hoscode && !form.getFieldsValue().hosname} onClick={clearHandler}>
                            清空
                        </Button>
                    </Space>
                </Form.Item>
            </Form>

            {/* 按钮 */}
            <Space className={'mt20'}>
                <Button type='primary'>添加</Button>
                <Button disabled>批量删除</Button>
            </Space>

            {/* 表格 */}
            <Table
                className={'mt20'}
                columns={columns}
                dataSource={dataSource}
                pagination={{
                    total: total,
                    pageSize: pageSize,
                    current: current,
                    pageSizeOptions: [3, 5],
                    showSizeChanger: true,
                    showQuickJumper: true,
                    onChange: getHospitalSetData
                }}
                rowKey={'id'}
                loading={loading}
            />
        </Card>
    )
}
